<script>
    import * as echarts from 'echarts'
import BaseChartVue from '@/components/BaseChart.vue'
    export default {
        name: 'ringChart',
        components: {},
        extends: BaseChartVue,
        props: {
            dataList: {
                type: Array,
                default: () => {
                    return [
                        { name: '质差', value: 200 },
                        { name: '无覆盖', value: 70 },
                        { name: '端口扩容', value: 90 },
                        { name: '政企', value: 60 }
                    ]
                },
            },
            colorArr: {
                type: Array,
                default: () => {
                    return ['#0a81FF', '#74C7FB', '#FE7472 ', '#FFA942', '#61F8A9']
                },
            },
            radiusArr: {
                type: Array,
                default: () => {
                    return ['40%', '90%']
                },
            },
            interval: {
                //间隔
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {}
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {
            makeOptions() {
                const option = {
                    color: this.colorArr,
                    legend: {
                        orient: 'vertical',
                        icon: 'circle',
                        top: 'center',
                        right: 30,
                        textStyle: {
                            align: 'left',
                            verticalAlign: 'middle',
                            height: 25,
                            lineHeight: 25,
                            fontSize: 14,
                            rich: {
                                name: {
                                    fontSize: 14,
                                    width: 60
                                },
                                value: {
                                    fontSize: 14,
                                    fontWeight: "bold"
                                },
                                rate: {
                                    fontSize: 14,
                                },
                            },
                        },
                        formatter: (name) => {
                            if (this.dataList.length) {
                                const item = this.dataList.filter((item) => item.name === name)[0];
                                return `{name|${name}}{rate|工单数量：}{value| ${item.value}}个`;
                            }
                        },
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: this.radiusArr,
                            center: ['25%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center',
                            },
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: '#fff',
                                    borderWidth: this.interval ? 3 : 0,
                                    label:{
                                        show: true,
	                                    position:'inside',
                                        // formatter: '{b} : {d}%',
                                        formatter: '{d}%',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                        color: '#fff',
                                        textShadowColor:'#000',
                                        textShadowBlur: 2, // 阴影的模糊大小
                                    }
                                },
                            },
                            data: this.dataList,
                        },
                    ],
                }
                return option
            },
        },
    }
</script>
